<template>
  <div id="customer-service-template-detail">
    <nav aria-label="breadcrumb" role="navigation">
      <ol class="breadcrumb pb-0">
        <li class="breadcrumb-item ms-2">
          <router-link to="/admin/customerServiceTemplates"
            >服务费模板</router-link
          >
        </li>
        <li class="breadcrumb-item">详情</li>
      </ol>
    </nav>

    <div class="card">
      <table class="table table-striped table-hover table-sm">
        <thead>
          <tr>
            <th>ID</th>
            <th>模板代码</th>
            <th>模板名称</th>
            <th>价格模式</th>
            <th>出票服务费</th>
            <th>保险金额</th>
            <th>退票服务费</th>
            <th>改签服务费</th>
            <th>服务费报表显示</th>
            <th>GP票模式</th>
            <th>规则强度</th>
            <th>生成时间</th>
            <th>修改时间</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          <tr v-if="detail !== null">
            <td>{{ detail.id }}</td>
            <td>{{ detail.templateCode }}</td>
            <td>{{ detail.templateName }}</td>
            <td>
              <span v-if="detail.flightPriceMode === 0">黑屏公布运价</span>
              <span v-else>大客户优先票价</span>
            </td>
            <td>{{ detail.flightTicketingFee }}</td>
            <td>{{ detail.flightInsurance }}</td>
            <td>{{ detail.flightRefundFee }}</td>
            <td>{{ detail.flightChangeFee }}</td>
            <td>
              <span v-if="detail.reportShowFee === 0">合并</span>
              <span v-else>单列</span>
            </td>
            <td>
              <span v-if="detail.gpMode === 0">不可开</span>
              <span v-if="detail.gpMode === 1">可开</span>
              <span v-if="detail.gpMode === 2">仅开</span>
            </td>
            <td>
              <span v-if="detail.strength === 0">弱</span>
              <span v-if="detail.strength === 10">强</span>
            </td>
            <td>{{ detail.createTime }}</td>
            <td>{{ detail.lastUpdate }}</td>
            <td></td>
          </tr>
        </tbody>
      </table>
      <div class="card-body py-0 bg-info text-white">航司+舱位 服务费规则</div>
      <div class="card-body px-5">
        <a
          href="javascript:void(0)"
          class="btn btn-success ms-auto"
          @click="newGroup()"
          >新建</a
        >
        <table
          class="table table-striped table-hover table-sm"
          v-if="detail !== null"
        >
          <thead>
            <tr>
              <th>航司</th>
              <th>舱位</th>
              <th>出票服务费</th>
              <th>退票服务费</th>
              <th>改签服务费</th>
              <th>最后修改时间</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(rule, index) in detail.flightRules" :key="rule.id">
              <td>{{ rule.carrier }}</td>
              <td>{{ rule.subclasses }}</td>
              <td>{{ rule.flightTicketingFee }}</td>
              <td>{{ rule.flightRefundFee }}</td>
              <td>{{ rule.flightChangeFee }}</td>
              <td>{{ rule.lastUpdate }}</td>
              <td>
                <button class="btn btn-sm" @click.stop="edit(index)">
                  修改
                </button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <my-modal-customer-service-template-detail
      ref="detailModal"
    ></my-modal-customer-service-template-detail>
  </div>
</template>

<script>
import { mapMutations } from "vuex";
import $ from "jquery";
import {
  searchCustomerServiceTemplate,
  saveCustomerServiceFlightRule,
} from "@/api/admin";
import MyModalCustomerServiceTemplateDetail from "@/components/modal/my-modal-customer-service-template-detail.vue";

export default {
  components: {
    MyModalCustomerServiceTemplateDetail,
  },
  data() {
    return {
      id: 0,
      detail: null,

      carrier: "",
      subclass: "",
      flightTicketingFee: 0,
      flightRefundFee: 0,
      flightChangeFee: 0,
    };
  },
  computed: {
    isAdmin() {
      return this.$store.getters.isAdmin;
    },
  },
  mounted: function () {
    this.id = parseInt(this.$route.params.id);
    this.searchDetail();
  },
  methods: {
    ...mapMutations(["showLoading", "hideLoading"]),
    showErrMsg: function (msg, msgType) {
      this.$store.dispatch("showAlertMsg", {
        errMsg: msg,
        errMsgType: msgType,
      });
    },
    searchDetail: function () {
      this.showLoading();

      searchCustomerServiceTemplate(
        this.id,
        (v) => {
          this.detail = v;
        },
        () => {
          this.hideLoading();
        }
      );
    },
    reset: function () {
      this.carrier = "";
      this.subclass = "";
      this.flightTicketingFee = 0;
      this.flightRefundFee = 0;
      this.flightChangeFee = 0;
    },
    newGroup: function () {
      this.reset();
      const params = {
        carrier: "",
        subclass: "",
        flightTicketingFee: 0,
        flightRefundFee: 0,
        flightChangeFee: 0,
      };

      this.$refs.detailModal
        .modal(params)
        .then((v) => this.save(v))
        .catch((ex) => {});
    },
    edit: function (index) {
      const info = this.detail.flightRules[index];

      const params = {
        carrier: info.carrier,
        subclass: info.subclasses,
        flightTicketingFee: info.flightTicketingFee,
        flightRefundFee: info.flightRefundFee,
        flightChangeFee: info.flightChangeFee,
      };

      this.$refs.detailModal
        .modal(params)
        .then((v) => this.save(v))
        .catch((ex) => {});
    },
    save: function (v) {
      const params = {
        carrier: v.carrier,
        subclasses: v.subclass,
        flightTicketingFee: v.flightTicketingFee,
        flightRefundFee: v.flightRefundFee,
        flightChangeFee: v.flightChangeFee,
      };
      saveCustomerServiceFlightRule(
        this.id,
        params,
        (v) => {
          if (v.status === "OK") {
            this.showErrMsg("操作成功");
            this.searchDetail();
          } else {
            this.showErrMsg("失败：" + v.errmsg, "danger");
          }
        },
        (f) => {
          this.showErrMsg(f.statusText, "danger");
        }
      );
    },
  },
};
</script>
